<template>
    <div class="search-index">
        <!-- 搜索页面的头部（搜索框） -->
        <Header>    
        </Header>
        <!-- 搜索页面的主体内容 -->
        <section>
            <!-- 历史搜索 -->
            <div class="search-history" v-if="searchArr.length">
                <h2>
                    <i class="iconfont">&#xe8b8;</i>
                    历史搜索
                    <!-- 清空历史记录 -->
                    <span @click="deleteStorage">清空历史记录</span>
                </h2>
                <ul>
                    <li v-for="(item,index) in searchArr" :key="index" @click="goSearchList(item)">{{item}}</li>
                </ul>
            </div>
            <div class="search-null" v-else><p>暂无搜索记录...</p></div>
            <!-- 火爆搜索 -->
            <div class="search-hot">
                <h2>
                    <i class="iconfont">&#xe625;</i>
                    热门搜索
                </h2>
                <ul>
                    <li v-for="(item,index) in hotList" :key="index" @click="goSearchList(item.name)">{{item.name}}</li>
                    
                </ul>
            </div>
            <!-- 推荐商品 -->
            <!-- <div>
                <h1>推荐商品</h1>
                
            </div> -->
        </section>
        <!-- 搜索页面的底部栏 -->
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue'
import Header from "@/components/search/Header.vue"

//引入axios的二次封装
import http from '@/common/api/request.js'

//引入mint-ui来修饰弹框
import { MessageBox } from 'mint-ui';

export default {
    name:"search-index",
    components:{
        Tabbar,
        Header,
    },
    data(){
        return{
            searchArr:[],
            hotList:[]    
        }
    },
    created(){
        //获取历史搜索列表数据 用本地存储的方法获取
        this.searchArr =JSON.parse(localStorage.getItem("searchList")) ||[];
        this.getHotData()
    },
    methods:{
        deleteStorage(){
            MessageBox({
                title: '提示',
                message: '确定执行此操作?',
                showCancelButton: true
            }).then(res=>{
                if(res ==='confirm'){
                    //删除本地存储
                    localStorage.removeItem("searchList");
                    //清空数组中的数据
                    this.searchArr=[];
                }
              
            })
        },
        //点击历史记录跳转到相对应的界面
        goSearchList(item){
            this.$router.push({
                name:"search-list",
                query:{
                    // 给url上传key 点击啥传啥地址到url上
                    key:item
                }
            })
        },
        //获取火爆推荐的列表
        getHotData(){
            http.$axios({
                url:'/api/goods/hotList',
            }).then(res =>{
                this.hotList = res
            })
            
        }
    }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
//给背景加全屏颜色
.search-index::before{
	content: ' ';
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #f5f5f5;
	background-size: 100% auto;
}

.search-index{
    display: flex;
    flex-direction: column;
    width: 100vw;
    background-color: #f5f5f5;
    section{
        margin-top: (40 / @rootsize);
        margin-bottom:1.6rem;
        
    }
    .search-history{
        padding: (20 / @rootsize);
        h2{
            display: flex;
            position: relative;
            align-items: center;
            padding: (10 / @rootsize);
            font-size: (20 / @rootsize);
            font-weight: 400;
            span{
                position: absolute;
                right: ( 20 / @rootsize);
                font-size: (10 /@rootsize);
            }
            i{  
                padding-right: (3 / @rootsize);
                font-weight: 600;
                color: red;
            }
        }
        ul{
            padding: (10 / @rootsize) (10 / @rootsize);
            display: flex;
            flex-wrap: wrap;
            li{
                margin:  (5 / @rootsize);
                padding: (3 / @rootsize) (6 / @rootsize);
                font-size: (14 / @rootsize);
                border: 1px solid #ccc;
                font-size: (12 / @rootsize);
            }
        }
    }
    .search-null{
        padding: (30 / @rootsize);
        font-size: (16 / @rootsize);
    }
    .search-hot{
        padding: (20 / @rootsize);
        h2{
            display: flex;
            align-items: center;
            padding: (10 / @rootsize);
            font-size: (20 / @rootsize);
            font-weight: 400;
            
            i{  
                padding-right: (5 / @rootsize);
                font-weight: 600;
                color: red;
            }
        }
        ul{
            padding: (10 / @rootsize) (10 / @rootsize);
            display: flex;
            flex-wrap: wrap;
            li{
                margin:  (5 / @rootsize);
                padding: (3 / @rootsize) (6 / @rootsize);
                font-size: (14 / @rootsize);
                border: 1px solid #ccc;
                font-size: (12 / @rootsize);
            }
        }
    }
}
</style>